<template>
  <div class="EDConsultation">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>应急会商</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EDConsultation-center">
      <div class="EDConsultation-title">国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命令〔2021〕第03号</div>
      <div class="EDConsultation-content">
        <div class="EDConsultation-left">
          <div class="EDConsultation-tb-bt-titel">
            <div class="EDConsultation-tb-bt-top">指挥中心</div>
          </div>
          <div class="EDConsultation-hs-titel">已参与指挥中心</div>
          <div class="EDConsultation-hs-contnet">
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">国网湖北省电力有限公司26楼应急指挥中心</div>
            </div>
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">国网随州供电公司应急指挥中心
                <div class="EDConsultation-hs-gsyq-icon"></div>
              </div>
              <div class="EDConsultation-hs-gsyq">邀请会商</div>
            </div>
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">国网随县供电公司应急指挥中心
                <div class="EDConsultation-hs-gsyq-icon"></div>
              </div>
              <div class="EDConsultation-hs-gsyq">邀请会商</div>
            </div>
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">35千伏柳林变电站-便携站</div>
            </div>
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">35千伏何店变电站-综合站</div>
            </div>
          </div>
          <div class="EDConsultation-hs-titel">全部指挥中心</div>
          <div class="EDConsultation-hs-contnet">
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">国网宜昌供电公司应急指挥中心
                <div class="EDConsultation-hs-gsyq-icon"></div>
              </div>
              <div class="EDConsultation-hs-gsyq">邀请会商</div>
            </div>
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">国网孝感供电公司应急指挥中心
                <div class="EDConsultation-hs-gsyq-icon"></div>
              </div>
              <div class="EDConsultation-hs-gsyq">邀请会商</div>
            </div>
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">国荆门感供电公司应急指挥中心
                <div class="EDConsultation-hs-gsyq-icon"></div>
              </div>
              <div class="EDConsultation-hs-gsyq">邀请会商</div>
            </div>
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">国网黄石供电公司应急指挥中心</div>
            </div>
            <div class="EDConsultation-hs-gs">
              <div class="EDConsultation-hs-gsmc">国网鄂州供电公司应急指挥中心</div>
            </div>
          </div>
        </div>
        <div class="EDConsultation-right">
          <div class="EDConsultation-sgssh">
            <div class="EDConsultation-sgssh-top">
              <div class="EDConsultation-tb-bt-titel">
                <div class="EDConsultation-tb-bt-top">响应命令单</div>
                <div class="Emergency-tb-bt-bottom">更多</div>
              </div>
              <div class="EDConsultation-xymld">
                <div class="EDConsultation-xymld-content">
                  <div class="EDConsultation-xymld-title">国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命〔2021〕 第03号</div>
                  <div class="EDConsultation-xymld-jb">III级</div>
                </div>
                <div class="EDConsultation-xymld-content">
                  <div class="EDConsultation-xymld-title">国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命〔2021〕 第03号</div>
                  <div class="EDConsultation-xymld-jb">III级</div>
                </div>
                <div class="EDConsultation-xymld-content">
                  <div class="EDConsultation-xymld-title">国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命〔2021〕 第03号</div>
                  <div class="EDConsultation-xymld-jb">III级</div>
                </div>
                <div class="EDConsultation-xymld-content">
                  <div class="EDConsultation-xymld-title">国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命〔2021〕 第03号</div>
                  <div class="EDConsultation-xymld-jb">III级</div>
                </div>
                <div class="EDConsultation-xymld-content">
                  <div class="EDConsultation-xymld-title">国网湖北省电力有限公司关于随州市随县柳林镇（暴雨）III级应急响应命〔2021〕 第03号</div>
                  <div class="EDConsultation-xymld-jb">III级</div>
                </div>
              </div>
            </div>
            <div class="EDConsultation-sgssh-bootm">
              <div class="EDConsultation-tb-bt-titel">
                <div class="EDConsultation-tb-bt-top">省公司会商</div>
              </div>
              <div class="EDConsultation-sgshs-tb">
                <div class="EDConsultation-sgshs-tbwz">
                  <div>会商状态</div>
                  <div>会商录像及纪要数</div>
                </div>
                <div class="EDConsultation-sgshs-tbys">
                  <div id="RightLine" style="width:40%;height:100%"></div>
                  <div id="zzt" style="width:60%;height:100%"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="EDConsultation-dsgssh">
            <div class="EDConsultation-tb-bt-titel">
              <div class="EDConsultation-tb-bt-top">地市级单位会商</div>
            </div>
            <div class="EDConsultation-sgshs-tb">
              <div class="EDConsultation-sgshs-tbwz">
                <div>会商次数</div>
                <div>会商录像及纪要数</div>
              </div>
              <div class="EDConsultation-sgshs-tbys">
                <div id="Team" style="width:50%;height:100%"></div>
                <div id="zzts" style="width:50%;height:100%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EDConsultation",
  components: {},
  data() {
    return {

    };
  },
  mounted() {
    this.initCharts();// 饼图
    this.Histogram();// 柱状图
    this.Histograms();// 柱状图
    this.initChart();
  },
  methods: {
    initCharts() {
      var option;
      //  获取数据
      option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          // type: "plain",
          // orient: "vertical",
          right: 0,
          bottom: 10,
          textStyle: {
            color: "#FFFFFF",
            fontSize: "13px",
            padding: [0, 0, -6, 0]
          }
          // formatter: function (name) {
          //   const data = option.series[0].data
          //   // console.log(data, 'data')
          //   let total = 0
          //   let tarValue
          //   for (let i = 0; i < data.length; i++) {
          //     total += data[i].value
          //     if (data[i].name == name) {
          //       tarValue = data[i].value
          //     }
          //   }
          //   // 计算出百分比
          //   const p = Math.round((tarValue / total) * 100) + "%"
          //   return `${name} `
          //   // name是名称，v是数值
          // }
          // bottom: 20,
        },
        series: [
          {
            name: "39\n会商总数",
            type: "pie",
            label: {
              show: false,
              normal: {
                formatter: (params) => {
                  return params.seriesName;
                },
                position: "center",
                color: "white",
                fontSize: 20,
                fontWeight: "bold"
              }
            },
            color: [
              "#FEDF6E",
              "#258FE9",
              "#F5885C"
            ],
            radius: ["50%", "80%"],
            center: ["60%", "40%"],
            avoidLabelOverlap: false,
            labelLine: {
              show: false
            },
            data: [
              { value: 8, name: "未开始" },
              { value: 5, name: "进行中" },
              { value: 26, name: "已结束" }
            ]
          }
        ]
      };
      var myChart = this.$echarts.init(document.getElementById("RightLine")); // 图标初始化
      myChart.setOption(option); // 渲染页面
      // 随着屏幕大小调节图标
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    Histogram() {
      var option;
      option = {
        grid: {
          // 设置图表四周留白间距
          top: "10%",
          right: "5%",
          bottom: "12%",
          left: "20%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          data: ["会议纪要", "会商录像"]
        },
        series: [
          {
            name: "会议纪要",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + "";
              }
            },
            zlevel: 1,
            z: 1,
            itemStyle: {
              barBorderRadius: [0, 30, 30, 0],
              normal: {
                // 这里设置每个柱子颜色不一样
                color: function (params) {
                  // 定义一个颜色数组colorList
                  var colorList = ["#01B5B1", "#4425DA"];
                  return colorList[params.dataIndex];
                }
              }
            },
            barWidth: 30,
            // itemStyle: {
            //   barBorderRadius: [0, 30, 30, 0],
            // },
            data: [26, 10]
          }

        ]
      };
      var myChart = this.$echarts.init(document.getElementById("zzt")); // 图标初始化
      myChart.setOption(option); // 渲染页面
      // 随着屏幕大小调节图标
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    Histograms() {
      var option;
      option = {
        grid: {
          // 设置图表四周留白间距
          top: "10%",
          right: "5%",
          bottom: "12%",
          left: "10%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          data: ["会议纪要", "会商录像"]
        },
        series: [
          {
            name: "会议纪要",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + "";
              }
            },
            zlevel: 1,
            z: 1,
            itemStyle: {
              barBorderRadius: [0, 30, 30, 0],
              normal: {
                // 这里设置每个柱子颜色不一样
                color: function (params) {
                  // 定义一个颜色数组colorList
                  var colorList = ["#01B5B1", "#4425DA"];
                  return colorList[params.dataIndex];
                }
              }
            },
            barWidth: 30,
            // itemStyle: {
            //   barBorderRadius: [0, 30, 30, 0],
            // },
            data: [26, 10]
          }

        ]
      };
      var myChart = this.$echarts.init(document.getElementById("zzts")); // 图标初始化
      myChart.setOption(option); // 渲染页面
      // 随着屏幕大小调节图标
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.on("click", (v) => {
        this.$router.push({
          name: "EDConsultationList"
        });
      });
    },
    initChart() {
      var option;
      //  获取数据
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "2%",
          right: "4%",
          top: "10%",
          bottom: "0%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            data: [
              "国网随州供电公司",
              "国网随县供电公司",
              "35千伏柳林变电站-便捷站",
              "35千伏柳林变电站-便捷站"
            ],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              // interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              },
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 7; // 一行显示几个字 然后就超过字数就会自动换行
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            }
          }
        ],
        yAxis:
        {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff"
          },
          splitLine: {
            lineStyle: {
              width: 1,
              color: ["#666"],
              type: "dashed"
            }
          },
          min: 0,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#22588F"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          }
        },
        series: [
          {
            name: "会商次数",
            type: "bar",
            barWidth: 20,
            stack: "Ad",
            emphasis: {
              focus: "series"
            },
            color: "#148AF3",
            data: [60, 55, 70, 85]
          },
          {
            name: "会商次数",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series"
            },
            color: "#F59066",
            data: [100, 80, 91, 134]
          },
          {
            name: "会商次数",
            type: "bar",
            stack: "Ad",
            color: "#FDDD67",
            emphasis: {
              focus: "series"
            },
            itemStyle: {
              normal: {
                // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [5, 5, 0, 0]
              }
            },
            data: [50, 32, 30, 20]
          }
        ]
      };
      var myChart = this.$echarts.init(document.getElementById("Team")); // 图标初始化
      myChart.setOption(option); // 渲染页面
      // 随着屏幕大小调节图标
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped lang="less">
.EDConsultation {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }
  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }
  .EDConsultation-center {
    width: 100%;
    height: 100%;
    margin-top: 5px;
    .EDConsultation-title {
      width: 100%;
      padding-bottom: 8px;
      text-align: center;
      font-size: 18px;
      font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
      font-weight: 700;
      font-style: normal;
      color: rgba(255, 255, 255, 0.847058823529412);
    }
    .EDConsultation-content {
      width: 100%;
      height: 95%;
      display: flex;
      justify-content: space-between;
      .EDConsultation-left {
        width: 25%;
        height: 100%;
        border: #3270ff 1px solid;
        .EDConsultation-tb-bt-titel {
          width: 100%;
          height: 6%;
          background-color: rgba(23, 73, 180, 1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .EDConsultation-tb-bt-top {
            font-size: 14px;
            color: #d5f0ff;
            font-family: "MicrosoftYaHeiUI-Bold", "Microsoft YaHei UI Bold", "Microsoft YaHei UI";
            font-weight: 700;
            letter-spacing: 1px;
            text-indent: 5px;
            // background-color: #eeeeee;
          }
        }
        .EDConsultation-hs-titel {
          width: 100%;
          padding: 10px 0;
          font-family: "Microsoft YaHei UI";
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          text-indent: 20px;
          color: #ffffff;
        }
        .EDConsultation-hs-contnet {
          width: 100%;
          margin: 0 auto;
          height: 39%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .EDConsultation-hs-gs {
            width: 95%;
            height: 16%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            .EDConsultation-hs-gsmc {
              width: 78%;
              border: #3270ff solid 1px;
              border-radius: 3px;
              text-align: center;
              font-family: "Microsoft YaHei UI";
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #ffffff;
              line-height: 30px;
              background-color: #044b8b; //黑色背景：黑
              position: relative;
            }
            .EDConsultation-hs-gsyq-icon {
              position: absolute;
              right: 5px;
              top: 10px;
              width: 10px;
              height: 10px;
              background-color: #70b603;
              border-radius: 50%;
            }
            .EDConsultation-hs-gsyq {
              width: 20%;
              border: #3270ff solid 1px;
              border-radius: 3px;
              text-align: center;
              font-family: "Microsoft YaHei UI";
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #ffffff;
              background-color: #044b8b; //黑色背景：黑
              line-height: 30px;
            }
          }
        }
      }
      .EDConsultation-right {
        width: 74%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .EDConsultation-sgssh {
          width: 100%;
          height: 49%;
          display: flex;
          justify-content: space-between;
          .EDConsultation-sgssh-top {
            width: 30%;
            height: 100%;
            border: #3270ff 1px solid;
            .EDConsultation-xymld {
              width: 100%;
              height: 90%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              .EDConsultation-xymld-content {
                width: 95%;
                height: 18%;
                margin: 0 auto;
                background-color: #0e2e61;
                display: flex;
                justify-content: space-between;
                position: relative;
                border: #044b8b 2px solid;
                .EDConsultation-xymld-title {
                  width: 90%;
                  font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
                  font-weight: 700;
                  font-style: normal;
                  color: #008dff;
                  font-size: 12px;
                  text-align: 2px;
                  line-height: 20px;
                }
                .EDConsultation-xymld-jb {
                  position: absolute;
                  right: 3px;
                  top: 10px;
                  width: 30px;
                  height: 20px;
                  text-align: center;
                  line-height: 20px;
                  border-radius: 2px;
                  border: 1px solid rgba(255, 255, 0, 0.847058823529412);
                  font-family: "Microsoft YaHei UI Bold", "Microsoft YaHei UI Regular", "Microsoft YaHei UI";
                  font-weight: 700;
                  font-style: normal;
                  font-size: 13px;
                  color: rgba(255, 255, 0, 0.847058823529412);
                }
              }
            }
          }
          .EDConsultation-sgssh-bootm {
            width: 69%;
            height: 100%;
            border: #3270ff 1px solid;
            .EDConsultation-sgshs-tb {
              width: 100%;
              height: 100%;
              .EDConsultation-sgshs-tbwz {
                width: 90%;
                height: 10%;
                margin: 0 auto;
                margin-top: 2px;
                display: flex;
                justify-content: space-around;
                font-family: "Microsoft YaHei UI";
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #ffffff;
              }
              .EDConsultation-sgshs-tbys {
                width: 100%;
                height: 80%;
                display: flex;
              }
            }
          }
        }
        .EDConsultation-dsgssh {
          width: 100%;
          height: 48%;
          border: #3270ff 1px solid;
          .EDConsultation-sgshs-tb {
            width: 100%;
            height: 90%;
            .EDConsultation-sgshs-tbwz {
              width: 90%;
              height: 10%;
              margin: 0 auto;
              margin-top: 2px;
              display: flex;
              justify-content: space-around;
              font-family: "Microsoft YaHei UI";
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #ffffff;
            }
            .EDConsultation-sgshs-tbys {
              width: 100%;
              height: 80%;
              display: flex;
            }
          }
        }
      }
    }
  }
}
</style>
